<template>
  <!-- <div class="container">
    <div class="list">
      <div style="padding: 0 10px">
        <div class="height"></div>

        <div class="box_title">单位基本信息</div>
        <div class="height"></div>

        <div class="van-hairline--bottom"></div>

        <div class="item van-hairline--bottom">
          <span class="iconfont icon-gongsi"></span>
          <div class="title">{{ data.workStationName }}</div>
        </div>
        <div class="item van-hairline--bottom">
          <span class="iconfont icon-anquan"></span>
          <div class="title">{{ data.unitName }}</div>
        </div>
        <div class="item van-hairline--bottom">
          <span class="iconfont icon-dingweixiao"></span>
          <div class="title">{{ data.address }}</div>
        </div>
        <div class="item van-hairline--bottom">
          <span class="iconfont icon-tongyishehuixinyongdaima"></span>
          <div class="title">{{ data.identify }}</div>
        </div>

        <div class="item van-hairline--bottom">
          <van-tag
            plain
            type="primary"
            size="large"
            style="margin-right: 10px"
            >{{ data.districtStreet }}</van-tag
          >
        </div>
        <div class="height"></div>
      </div>

      <div class="height" style="background: #f3f3f3"></div>
      <div class="height"></div>
      <div style="padding: 0 10px">
        <div class="box_title">综合评分</div>
      </div>
      <div class="height"></div>

      <div class="van-hairline--bottom"></div>
      <div class="height"></div>

      <div style="padding: 0 10px">
        <div id="main" style="width: 375px; height:260px"></div>
      </div>
      <div class="height"></div>


      <div class="list">
























        <div class="item van-hairline--bottom">
          <div class="title">
            <span class="color"> 单位门店:</span>
            {{ data.superViseUnitScore }}
          </div>
        </div>

        <div class="item van-hairline--bottom">
          <div class="title">
            <span class="color"> 企业制度:</span>
            {{ data.systemScore }}
          </div>
        </div>

        <div class="item van-hairline--bottom">
          <div class="title">
            <span class="color"> SOP登记:</span>
            {{ data.sopScore }}
          </div>
        </div>

        <div class="item van-hairline--bottom">
          <div class="title">
            <span class="color"> 定期会议:</span>
            {{ data.conferenceScore }}
          </div>
        </div>
  <div class="item van-hairline--bottom">
          <div class="title">
            <span class="color"> 定期培训:</span>
            {{ data.trainingScore }}
          </div>
        </div>
        <div class="item van-hairline--bottom">
          <div class="title">
            <span class="color"> 定期自查:</span>
            {{ data.examinationScore }}
          </div>
        </div>

   <div class="item van-hairline--bottom">
          <div class="title">
            <span class="color"> 定期自检:</span>
            {{ data.quickCheckScore }}
          </div>
        </div>
   <div class="item van-hairline--bottom">
          <div class="title">
            <span class="color"> 索证索票:</span>
            {{ data.purchaseScore }}
          </div>
        </div>
   <div class="item van-hairline--bottom">
          <div class="title">
            <span class="color"> 社会责任:</span>
            {{ data.publicityScore }}
          </div>
        </div>




      </div>
      <div class="height"></div>
      <div class="height" style="background: #f3f3f3"></div>
      <div class="height"></div>
      <div style="padding: 0 10px">
        <div class="box_title">经营单位</div>
      </div>
      <div class="height"></div>
      <div class="van-hairline--bottom"></div>
      <div style="padding: 0 10px">
        <div
          class="list van-hairline--bottom"
          v-for="(item, index) in data.chainStoreSuperViseUnitList"
          :key="index"
        >
          <div class="height"></div>
          <van-row type="flex" justify="space-between">
            <van-col span="18" class="fontSize">
                 执照名称:{{ item.supUnitName }}
            </van-col>
            <van-col span="6" style="text-align: right">





              <van-tag
                plain
                size="medium"
                type="success"
                v-if="item.indexScore>79"
                >食安指数 {{ item.indexScore }}</van-tag
              >

               <van-tag plain type="warning" size="medium" v-else-if="item.indexScore>59">食安指数 {{
                item.indexScore
              }}</van-tag>
              <van-tag plain type="danger" size="medium" v-else>食安指数 {{
                item.indexScore
              }}</van-tag>
            </van-col>
          </van-row>
          <div class="height"></div>
          <van-row>
            <van-col span="24" class="fontSize"> 许可证号:{{ item.newLicenseNo }} </van-col>
          </van-row>
          <div class="height"></div>

          <van-row>
            <van-col span="24" class="fontSize">
              信用代码:{{ item.supIdentify }}
            </van-col>
          </van-row>
           <!-- <van-row>
            <van-col span="24" class="fontSize">
              执照名称:{{ item.supUnitName }}
            </van-col>
          </van-row> 
          <div class="height"></div>
        </div>
      </div>
    </div>
  </div> -->

  <div class="container">
    <header class="header_title">连锁店单位信息公示</header>
    <header class="header">
      <div class="title">{{ data.unitName }}</div>
      <div class="height-10"></div>
      <div style="font-size: 14px">{{ data.address }}</div>
      <div class="height-10"></div>
      <van-tag type="warning" size="mini" style="margin-right: 10px">{{
        data.districtStreet
      }}</van-tag>
      <van-tag type="danger" size="mini" v-if="data.bodyIndustryRemarks">{{
        data.bodyIndustryRemarks
      }}</van-tag>
      <div class="height-10"></div>
      <div class="height-10"></div>
      <div style="text-align: center; font-size: 18px; font-weight: 700">
       {{this.$moment().add(-1, 'd').format('YYYY年MM月DD日') }}食安指数<span v-if="data.indexScore > 79" style="color: #a2db57">{{
          data.indexScore
        }}</span>
        <span v-else-if="data.indexScore > 59" style="color: #ffd700">{{
          data.indexScore
        }}</span>
        <span v-else style="color: #ff0000">{{ data.indexScore }}</span
        >分
      </div>
      <div id="main" style="width: 375px; height: 360px"></div>

      <div class="list">
        <div class="title">食安指数分析</div>

        <!-- { name: "安全状况", max: this.data.chainStoreScoreResponseList[0].superviseUnitTotal },
            { name: "制度管理", max: this.data.chainStoreScoreResponseList[0].systemTotal },
            // { name: "标准化操作", max: this.data.sopTotal },
            { name: "企业会议", max: this.data.chainStoreScoreResponseList[0].jointConferenceTotal },
            { name: "定期培训", max: this.data.chainStoreScoreResponseList[0].trainingTotal },
            { name: "单位自查", max: this.data.chainStoreScoreResponseList[0].unitCheckResultTotal },
            { name: "自查报告", max: this.data.chainStoreScoreResponseList[0].selfReportTotal },
            { name: "定期自检", max: this.data.chainStoreScoreResponseList[0].quickCheckTotal },
            { name: "三类人签署", max: this.data.chainStoreScoreResponseList[0].signTotal },
            { name: "日管控完成情况", max: this.data.chainStoreScoreResponseList[0].dayTotal },
            { name: "周排查完成情况", max: this.data.chainStoreScoreResponseList[0].weekTotal },
            { name: "月调度完成情况", max: this.data.chainStoreScoreResponseList[0].monthTotal }, -->
        <div
          v-if="
            data.chainStoreScoreResponseList &&
            data.chainStoreScoreResponseList[0]
          "
        >
          <div
            v-for="(item, index) in data.chainStoreScoreResponseList[0]
              .chainStoreScoreItemMiddleResponseList"
            :key="index"
          >
            <div class="height-10"></div>

            <van-divider
              :style="{ color: '#1890ff', borderColor: '#1890ff', margin: 0 }"
            >
              <div class="title_son">
                {{ item.chainStoreScoreItemResponseList[0].itemTypeStr }}
              </div></van-divider
            >
            <div class="height-10"></div>

            <div>{{ item.chainStoreScoreItemResponseList[0].content }}</div>
          </div>
        </div>

        <!-- <div class="height-10"></div>
        <div class="height-10"></div>
        <div>单位门店:{{ data.superViseUnitScore }}</div>
        <div class="height-10"></div>
        <div>企业制度:{{ data.systemScore }}</div>
        <div class="height-10"></div>
        <div>SOP登记:{{ data.sopScore }}</div>
        <div class="height-10"></div>
        <div>定期会议:{{ data.conferenceScore }}</div>
        <div class="height-10"></div>
        <div>定期培训:{{ data.trainingScore }}</div>
 <div class="height-10"></div>
        <div>定期自查:{{ data.examinationScore }}</div>

 <div class="height-10"></div>
        <div>定期自检:{{ data.quickCheckScore }}</div>


     <div class="height-10"></div>
        <div>索证索票:{{ data.purchaseScore }}</div>

    
     <div class="height-10"></div>
        <div>社会责任:{{ data.publicityScore }}</div> -->
      </div>
    </header>
    <section class="section">
      <div class="box">
        <div class="height-10"></div>
        <div
          class="title"
          style="padding-left: 5px; border-left: 5px solid #1890ff"
        >
          食安签署
        </div>
        <div class="height-10"></div>
        <div class="responsibility">
          <div class="left">
            <van-image
              width="100%"
              src="https://spaq.suzhou.gov.cn/ssa_zwtx.png"
              height="50px"
              fit="cover"
            />
          </div>
          <div class="right">
            <div class="title">企业主要负责人</div>
            <div v-if="data.personChargePeopleTheName">
              {{ data.personChargePeopleTheName }}
              <span class="green">已签署食品安全任命书</span>
            </div>
            <div v-else class="red">未签署</div>
          </div>
        </div>
        <div class="height-10"></div>
        <div class="responsibility">
          <div class="left">
            <van-image
              width="100%"
              src="https://spaq.suzhou.gov.cn/ssa_zwtx.png"
              height="50px"
              fit="cover"
            />
          </div>
          <div class="right">
            <div class="title">食品安全总监</div>
            <div v-if="data.chiefInspectorTheName">
              {{ data.chiefInspectorTheName }}
              <span class="green">已签署食品安全任命书</span>
            </div>
            <div v-else class="red">未签署</div>
          </div>
        </div>
        <div class="height-10"></div>

        <template v-for="(item, index) in data.safetyOfficerTheNameList">
          <div class="responsibility" :key="index">
            <div class="left">
              <van-image
                width="100%"
                src="https://spaq.suzhou.gov.cn/ssa_zwtx.png"
                height="50px"
                fit="cover"
              />
            </div>
            <div class="right">
              <div class="title">食品安全员</div>
              <div v-if="item">
                {{ item }}
                <span class="green">已签署食品安全任命书</span>
              </div>
              <div v-else class="red">未签署</div>
            </div>
          </div>
          <div class="height-10" :key="index"></div>
        </template>
      </div>
      <!-- <div
        class="title"
        style="background: #fff; padding: 10px; border-radius: 10px"
      >
        单位门店
      </div> -->
      <div
        class="title"
        style="padding-left: 5px; border-left: 5px solid #1890ff"
      >
        单位门店
      </div>
      <div class="height-10"></div>
      <div
        class="item"
        v-for="(item, index) in data.chainStoreSuperViseUnitList"
        :key="index"
        @click="Jump(item.fSuperviseUnitId)"
      >
        <van-row type="flex" justify="space-between">
          <van-col span="16" class="fontSize">
            执照名称:{{ item.supUnitName }}
          </van-col>
          <van-col span="8" style="text-align: right">
            <van-tag
              plain
              size="medium"
              type="success"
              v-if="item.indexScore > 79"
              >食安指数 {{ item.indexScore }}</van-tag
            >

            <van-tag
              plain
              type="warning"
              size="medium"
              v-else-if="item.indexScore > 59"
              >食安指数 {{ item.indexScore }}</van-tag
            >
            <van-tag plain type="danger" size="medium" v-else
              >食安指数 {{ item.indexScore }}</van-tag
            >
          </van-col>
        </van-row>
        <div style="height: 5px"></div>
        <van-row>
          <van-col span="24" class="fontSize">
            许可证号:{{ item.newLicenseNo }}
          </van-col>
        </van-row>
        <div class="height-10"></div>

        <van-row>
          <van-col span="24" class="fontSize">
            信用代码:{{ item.supIdentify }}
          </van-col>
        </van-row>
      </div>

      <div class="height-10"></div>
      <div
        style="text-align: center"
        v-if="
          data.chainStoreSuperViseUnitList &&
          data.chainStoreSuperViseUnitList.length == 0
        "
      >
        暂未纳入经营单位
      </div>
      <div class="height-10"></div>
    </section>
    <div class="height-10"></div>
    <footer class="footer">苏州市市场监督管理局监</footer>
  </div>
</template>
<script>
import { timestamp } from "@/utils/token";
import axios from "axios";
import { ImagePreview } from "vant";
import * as echarts from "echarts";

export default {
  data() {
    return {
      data: {},
    };
  },
  created() {
    // https://spaq.suzhou.gov.cn/test-ssa-api/sys/login/quaryCompanyMainPageInfo
    //  axios
    //   .get(
    //     "https://spaq.suzhou.gov.cn/test-ssa-api/unit/food/safety/update/findByNewLicenseNo",
    //     {
    //       params: {
    //         newLicenseNo: this.$route.query.newLicenseNo,
    //       },
    //       headers: {
    //         timestamp: timestamp(),
    //       }
    //     }
    //   )
    //   .then((res) => {
    //     if (res.data.code == 200) {
    //       this.data = res.data.data;
    //     } else {
    //       this.$toast(res.data.msg);
    //     }
    //   })
    //   .catch((err) => {
    //     console.log(12);
    //   });
  },
  computed: {},
  mounted() {
    this.quaryCompanyMainPageInfo();
  },
  methods: {
    quaryCompanyMainPageInfo() {
      axios
        .get(
          "https://spaq.suzhou.gov.cn/ssa-api/ssa/claim/map/chainStoreCode",
          {
            params: {
              id: this.$route.query.id,
            },
            headers: {
              timestamp: timestamp(),
            },
          }
        )
        .then((res) => {
          if (res.data.code == 200) {
            this.data = res.data.data;
            this.radar();
          } else {
            this.$toast(res.data.msg);
          }
        });
    },
    radar() {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById("main"));
      // 绘制图表
      // let color = "";
      // if (this.data.indexScore > 79) {
      //   color = "#008000";
      // } else if (this.data.indexScore > 59) {
      //   color = "#ffd700";
      // } else {
      //   color = "#ff0000";
      // }
      myChart.setOption({
        // title: {
        //   text: `本单位综合得分${this.data.indexScore}分`,
        //   left: "center",
        //   textStyle: {
        //     color,
        //   },
        //   // textAlign:"right"
        // },
        radar: {
          radius: "50%",
          center: ["50%", "55%"],
          splitNumber: 6, // 雷达图圈数设置
          // shape: 'circle',
          indicator: [
            // { name: "安全状况"+`\n${this.data.chainStoreScoreResponseList[0].superviseUnitScore}分`, max: this.data.chainStoreScoreResponseList[0].superviseUnitTotal },
            // { name: "制度管理"+`\n${this.data.chainStoreScoreResponseList[0].systemScore}分`, max: this.data.chainStoreScoreResponseList[0].systemTotal },
            // { name: "标准化操作"+`\n${this.data.chainStoreScoreResponseList[0].sopScore}分`, max: this.data.chainStoreScoreResponseList[0].sopTotal },
            // { name: "企业会议"+`\n${this.data.chainStoreScoreResponseList[0].jointConferenceScore}分`, max: this.data.chainStoreScoreResponseList[0].jointConferenceTotal },
            // { name: "定期培训"+`\n${this.data.chainStoreScoreResponseList[0].trainingScore}分`, max: this.data.chainStoreScoreResponseList[0].trainingTotal },
            // { name: "单位自查"+`\n${this.data.chainStoreScoreResponseList[0].unitCheckResultScore}分`, max: this.data.chainStoreScoreResponseList[0].unitCheckResultTotal },
            // { name: "自查报告"+`\n${this.data.chainStoreScoreResponseList[0].selfReportScore}分`, max: this.data.chainStoreScoreResponseList[0].selfReportTotal },
            // { name: "定期自检"+`\n${this.data.chainStoreScoreResponseList[0].quickCheckScore}分`, max: this.data.chainStoreScoreResponseList[0].quickCheckTotal },
            // { name: "原料采购"+`\n${this.data.chainStoreScoreResponseList[0].purchaseScore}分`, max: this.data.chainStoreScoreResponseList[0].purchaseTotal },
            // { name: "社会责任"+`\n${this.data.chainStoreScoreResponseList[0].publicityScore}分`, max: this.data.chainStoreScoreResponseList[0].publicityTotal },


// 完善管理体系、召开食安会议、定期开展培训、定期自检监测、门店食安状况、三类人三件事、开展自查报告
            {
              name:
                "完善管理体系" +
                `\n${this.data.chainStoreScoreResponseList[0].systemScore}分`,
              max: this.data.chainStoreScoreResponseList[0].systemTotal,
            },
            {
              name:
                "召开食安会议" +
                `\n${this.data.chainStoreScoreResponseList[0].jointConferenceScore}分`,
              max: this.data.chainStoreScoreResponseList[0].jointConferenceTotal,
            },
            // { name: "标准化操作", max: this.data.sopTotal },
            {
              name:
                "定期开展培训" +
                `\n${this.data.chainStoreScoreResponseList[0].trainingScore}分`,
              max: this.data.chainStoreScoreResponseList[0]
                .trainingTotal,
            },
            {
              name:
                "门店食安状况" +
                `\n${this.data.chainStoreScoreResponseList[0].superviseUnitScore}分`,
              max: this.data.chainStoreScoreResponseList[0].superviseUnitTotal,
            },
             {
              name:
                "三类人三件事" +
                `\n${this.data.chainStoreScoreResponseList[0].threeScore}分`,
              max: this.data.chainStoreScoreResponseList[0].threeTotal,
            },
             {
              name:
                "开展自查报告" +
                `\n${this.data.chainStoreScoreResponseList[0].selfReportScore}分`,
              max: this.data.chainStoreScoreResponseList[0].selfReportTotal,
            },
             {
              name:
                "定期自检监测" +
                `\n${this.data.chainStoreScoreResponseList[0].quickCheckScore}分`,
              max: this.data.chainStoreScoreResponseList[0].quickCheckTotal,
            },
            // {
            //   name:
            //     "单位自查" +
            //     `\n${this.data.chainStoreScoreResponseList[0].unitCheckResultScore}分`,
            //   max: this.data.chainStoreScoreResponseList[0]
            //     .unitCheckResultTotal,
            // },
            // {
            //   name:
            //     "自查报告" +
            //     `\n${this.data.chainStoreScoreResponseList[0].selfReportScore}分`,
            //   max: this.data.chainStoreScoreResponseList[0].selfReportTotal,
            // },
            // {
            //   name:
            //     "定期自检" +
            //     `\n${this.data.chainStoreScoreResponseList[0].quickCheckScore}分`,
            //   max: this.data.chainStoreScoreResponseList[0].quickCheckTotal,
            // },
          //   {
          //     name:
          //       "三类人签署" +
          //       `\n${this.data.chainStoreScoreResponseList[0].signScore}分`,
          //     max: this.data.chainStoreScoreResponseList[0].signTotal,
          //   },
          //   {
          //     name:
          //       "日管控" +
          //       `\n${this.data.chainStoreScoreResponseList[0].dayScore}分`,
          //     max: this.data.chainStoreScoreResponseList[0].dayTotal,
          //   },
          //   {
          //     name:
          //       "周排查" +
          //       `\n${this.data.chainStoreScoreResponseList[0].weekScore}分`,
          //     max: this.data.chainStoreScoreResponseList[0].weekTotal,
          //   },
          //   {
          //     name:
          //       "月调度" +
          //       `\n${this.data.chainStoreScoreResponseList[0].monthScore}分`,
          //     max: this.data.chainStoreScoreResponseList[0].monthTotal,
          //   },
          ],
          //            name: {
          //   //修改indicator文字的颜色
          //   textStyle: {
          //     color: "#000000",
          //   },
          // },

          axisName: {
            color: "#000000",
            // borderRadius: 3,
            fontSize: "14px",
            lineHeight: 20,
            // padding: [3, 5]
          },
          axisLine: {
            // 设置雷达图中间射线的颜色
            show: true,
            lineStyle: {
              width: 1,
              color: "#f3f3f3",
              type: "dotted",
            },
          },
          splitLine: {
            //网格颜色设置
            show: true,
            lineStyle: {
              width: 1,
              color: "#f3f3f3",
            },
          },
          splitArea: {
            //设置图表颜色，show的值为true
            show: true,
            areaStyle: {
              // color:"#c1ddf8", //一般设置方式
              //设置渐变背景色 new echarts.graphic.LinearGradient(a,b,c,d,arr)
              //a ,b,c,d值可为0，1 a:1表示arr中的颜色右到左；c:1 arr中的颜色左到右
              //b:1表示arr中的颜色下到上；d:1表示arr中的颜色上到下
              color: new echarts.graphic.LinearGradient(
                0,
                1,
                0,
                0,
                [
                  { offset: 0, color: "#ffffff" }, // 0% 处的颜色
                  { offset: 1, color: "#1890ff" }, // 100% 处的颜色
                ],
                false
              ),
            },
          },
        },
        series: [
          {
            name: "Budget vs spending",
            type: "radar",
            data: [
              {
                value: [
                  // this.data.chainStoreScoreResponseList[0].superviseUnitScore,
                  // this.data.chainStoreScoreResponseList[0].systemScore,
                  // this.data.chainStoreScoreResponseList[0].sopScore,
                  // this.data.chainStoreScoreResponseList[0].jointConferenceScore,
                  // this.data.chainStoreScoreResponseList[0].trainingScore,
                  // this.data.chainStoreScoreResponseList[0].unitCheckResultScore,
                  // this.data.chainStoreScoreResponseList[0].selfReportScore,
                  // this.data.chainStoreScoreResponseList[0].quickCheckScore,
                  // this.data.chainStoreScoreResponseList[0].purchaseScore,
                  // this.data.chainStoreScoreResponseList[0].publicityScore,


                  this.data.chainStoreScoreResponseList[0].systemScore,
                  this.data.chainStoreScoreResponseList[0].jointConferenceScore,
                  // this.data.sopScore,
                  this.data.chainStoreScoreResponseList[0].trainingScore,
                  this.data.chainStoreScoreResponseList[0].superviseUnitScore,
                  this.data.chainStoreScoreResponseList[0].threeScore,
                  this.data.chainStoreScoreResponseList[0].selfReportScore,
                  this.data.chainStoreScoreResponseList[0].quickCheckScore,
                
                ],
                lineStyle: {
                  width: 1,
                },
                symbol: "none",
                areaStyle: {
                  color: new echarts.graphic.RadialGradient(0.1, 0.6, 1, [
                    {
                      color: "rgba(255, 145, 124, 0.1)",
                      offset: 0,
                    },
                    {
                      color: "rgba(246,218,255, 0.9)",
                      offset: 1,
                    },
                  ]),
                },
              },
            ],
          },
        ],
      });
    },
    Preview(e) {
      ImagePreview([e]);
    },
    Jump(id) {
      console.log(id);
      this.$router.push("/publicity?id=" + id);
    },
  },

  //  filterHtml(val){
  //   if(val){
  //     return val.replace(/<[^>]+>/g, "")
  //   }else {
  //       return "--"
  //   }
};
</script>
<style lang="scss" scoped>
// .container {
//   // padding: 10px;
//   .list {
//     .item {
//       display: flex;
//       align-items: center;
//       padding: 5px 0;
//       .title {
//         padding-left: 10px;
//         font-size: 16px;
//       }
//       .iconfont {
//         color: #1890ff;
//         font-size: 22px;
//       }
//       .color {
//         color: #1890ff;
//       }
//     }
//     .fontSize {
//       font-size: 16px;
//     }
//   }
//   .height {
//     height: 10px;
//   }
//   .box_title {
//     border-left: 5px solid #1890ff;
//     padding-left: 10px;
//     font-size: 17px;
//   }
// }
.container {
   --red: #ff0000;
  --green: #008000;
  --yellow: #ffd700;
  .red {
    color: var(--red);
  }
  font-size: 14px;
  padding-bottom: 20px;
  .header_title {
    background-color: #1890ff;
    color: white;
    text-align: center;
    padding: 10px;
    font-size: 18px;
  }
  .header {
    padding: 10px;
    // background-color: #1890ff;
    background: linear-gradient(to bottom, #1890ff, #ffffff);
    color: white;
    .title {
      font-size: 18px;
    }
    .list {
      padding: 10px;
      background-color: #fff;
      color: #000;
      border-radius: 10px;
    }
  }
  .section {
    padding: 10px;
    background-color: #f3f3f3;
    .item {
      background-color: #fff;
      margin-bottom: 10px;
      padding: 10px;
      border-radius: 10px;
    }
    .title {
      font-size: 18px;
    }
  }
  .footer {
    padding: 10px;
    background-color: #1890ff;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    color: white;
    text-align: center;
  }
  .height-10 {
    height: 10px;
  }
}
.responsibility {
  padding: 10px;
  border-radius: 10px;
  background-color: #fff;
  // .padding_lfet {
  //   padding-left: 20px;
  // }
  display: flex;

  .left {
    width: 50px;
  }
  .right {
    padding-left: 10px;
    right: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
  }
  .title {
    font-size: 16px;
  }
}
</style>
